<template>
	<div>
		<div>
			<div class="mod-config">
				<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
					<el-form-item><el-input v-model="dataForm.key" placeholder="餐台名称" clearable></el-input></el-form-item>
					<el-form-item>
						<el-button @click="getDataList()">查询</el-button>
						<el-button v-if="isAuth('store:tstorediningtable:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
						<el-button v-if="isAuth('store:tstorediningtable:save')" type="primary" @click="addBatch()">批量新增</el-button>
						<el-button v-if="isAuth('store:tstorediningtable:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">
							批量删除
						</el-button>
					</el-form-item>
				</el-form>
				<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
					<el-table-column type="selection" header-align="center" align="center" width="50">

					</el-table-column>
					<el-table-column prop="diningTableNo" header-align="center" align="center" label="餐台名称"></el-table-column>
          <el-table-column prop="number" header-align="center" align="center" label="餐台编号"></el-table-column>
					<el-table-column prop="seatNum" header-align="center" align="center" label="座位数"></el-table-column>
					<el-table-column prop="status" header-align="center" align="center" label="状态">
						<template slot-scope="scope">
							<el-tag type="success" v-show="scope.row.status === 1">空闲</el-tag>
							<el-tag type="danger" v-show="scope.row.status === 2">就餐</el-tag>
							<el-tag type="warning" v-show="scope.row.status === 3">待清理</el-tag>
							<el-tag type="warning" v-show="scope.row.status === 4">锁定</el-tag>
              <el-tag type="warning" v-show="scope.row.status === 5">预结</el-tag>
              <el-tag type="primary" v-show="scope.row.status === 6">停用</el-tag>
						</template>
					</el-table-column>
<!--					<el-table-column prop="qrCode" header-align="center" align="center" label="二维码">-->
<!--						<template slot-scope="scope">-->
<!--							<el-tag type="success">&#45;&#45;&#45;&#45;</el-tag>-->
<!--						</template>-->
<!--					</el-table-column>-->
					<el-table-column prop="reamrk" header-align="center" align="center" label="备注"></el-table-column>
					<el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
              <el-button v-if="scope.row.status === 1" type="text" size="small" @click="stopOrStartDesk(scope.row.id,6,'#d0d0d0')">停用餐台</el-button>
              <el-button v-if="scope.row.status === 6" type="text" size="small" @click="stopOrStartDesk(scope.row.id,1,'#90EE90')">启用餐台</el-button>
							<el-button v-if="scope.row.status === 1 || scope.row.status === 6" type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					@size-change="sizeChangeHandle"
					@current-change="currentChangeHandle"
					:current-page="pageIndex"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					:total="totalPage"
					layout="total, sizes, prev, pager, next, jumper"
				></el-pagination>
				<!-- 弹窗, 新增 / 修改 -->
				<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
			</div>
		</div>

		<el-dialog title="批量新增" :close-on-click-modal="false" :visible.sync="addBatchVisle" width="50%" center>
			<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
				<el-form-item label="餐台前缀" prop="prefix"><el-input v-model="dataForm.prefix" placeholder="餐台前缀"></el-input></el-form-item>
				<el-form-item label="类型" prop="storeTypeId">
					<el-select v-model="dataForm.storeTypeId" placeholder="类型" @change="getRegionByStoreTypeId">
						<el-option v-for="item in storeTypeList" :label="item.storeTypeName" :key="item.id" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
        <el-form-item label="区域" prop="regionId">
          <el-select v-model="dataForm.regionId" placeholder="区域">
            <el-option v-for="item in regionList" :label="item.regionName" :key="item.id" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
				<el-form-item label="座位数" prop="seatNum"><el-input-number v-model="dataForm.seatNum" placeholder="座位数"></el-input-number></el-form-item>
				<el-form-item label="餐台数" prop="seatNum"><el-input-number v-model="dataForm.diningtableNum" placeholder="餐台数"></el-input-number></el-form-item>
				<el-form-item label="备注" prop="reamrk"><el-input v-model="dataForm.reamrk" placeholder="备注"></el-input></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addBatchVisle = false">取消</el-button>
				<el-button type="primary" @click="dataFormSubmit()" :disabled="disabledSubmit">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import AddOrUpdate from './tstorediningtable-add-or-update';
export default {
	data() {
		return {
      disabledSubmit:false,
			addBatchVisle: false,
			dataForm: {
				key: '',
        storeTypeId:'',
        regionId: '',
        prefix:'',
        seatNum:'',
        diningtableNum:'',
        reamrk:''
			},
			dataList: [],
			pageIndex: 1,
			pageSize: 10,
			totalPage: 0,
			dataListLoading: false,
			dataListSelections: [],
			addOrUpdateVisible: false,
			regionList: [],
			dataRule: {
				prefix: [{ required: true, message: '餐台前缀不能为空', trigger: 'blur' }],
				diningtableNum: [{ required: true, message: '餐台数不能为空', trigger: 'blur' }],
				regionId: [{ required: true, message: '所属区域不能为空', trigger: 'blur' }],
				seatNum: [{ required: true, message: '座位数不能为空', trigger: 'blur' }],
        storeTypeId:[{ required: true, message: '类型不能为空', trigger: 'blur' }]
			}
		};
	},
	components: {
		AddOrUpdate,
	},
	activated() {
		this.getDataList();
	},
	methods: {
    stopOrStartDesk(id,status,style){
      this.$confirm(`确定${status===6?'停用':'启用'}餐台吗, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl(`/store/tstorediningtable/stopOrStartDesk`),
          method: 'get',
          params: this.$http.adornParams({
            id: id,
            status: status,
            style: style
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500
            });
          }
          this.getDataList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },

		getRegionByStoreTypeId() {
			this.$http({
				url: this.$http.adornUrl('/store/tstoreregion/list'),
				method: 'get',
				params: this.$http.adornParams({
					page: 1,
					limit: 100,
					status: 1,
					storeTypeId: this.dataForm.storeTypeId
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.regionList = data.page.list;
				}
			});
		},

		dataFormSubmit() {
		  this.disabledSubmit = true
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/store/tstorediningtable/saveBatch`),
            method: 'post',
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              diningTableNum: this.dataForm.diningTableNum,
              regionId: this.dataForm.regionId,
              seatNum: this.dataForm.seatNum,
              prefix: this.dataForm.prefix,
              diningtableNum: this.dataForm.diningtableNum,
              reamrk: this.dataForm.reamrk,
              storeTypeId: this.dataForm.storeTypeId
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.addBatchVisle = false
              this.disabledSubmit = false;
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500
              });
            }
            this.getDataList();
          });
        }else {
          this.disabledSubmit = false
        }
      })
		},

		addBatch() {
		  this.dataForm = {}
      this.$nextTick(() => {
       // this.$refs['dataForm'].resetFields()
        //餐厅类型
        this.$http({
          url: this.$http.adornUrl('/store/tstoretype/list'),
          method: 'get'
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.storeTypeList = data.page.list;
            this.addBatchVisle = true;
          } else {
            this.storeTypeList = [];
          }
        });
      })


		},

		// 获取数据列表
		getDataList(id) {
			this.dataForm.regionId = id || null;
			this.dataListLoading = true;
			this.$http({
				url: this.$http.adornUrl('/store/tstorediningtable/list'),
				method: 'get',
				params: this.$http.adornParams({
					page: this.pageIndex,
					limit: this.pageSize,
					key: this.dataForm.key,
					regionId: this.dataForm.regionId
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataList = data.page.list;
					this.totalPage = data.page.totalCount;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
				this.dataForm.key = ''
				this.dataListLoading = false;
			});
		},
		// 每页数
		sizeChangeHandle(val) {
			this.pageSize = val;
			this.pageIndex = 1;
			this.getDataList();
		},
		// 当前页
		currentChangeHandle(val) {
			this.pageIndex = val;
			this.getDataList(this.dataForm.regionId);
		},
		// 多选
		selectionChangeHandle(val) {
			var arr = []
			val.forEach(item => {
				if(item.status === 1){
					arr.push(item)
				}
			})
			this.dataListSelections = arr;
		},
		// 新增 / 修改
		addOrUpdateHandle(id) {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(id);
			});
		},
		// 删除
		deleteHandle(id) {
			var ids = id
				? [id]
				: this.dataListSelections.map(item => {
						return item.id;
				  });
			this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					url: this.$http.adornUrl('/store/tstorediningtable/delete'),
					method: 'post',
					data: this.$http.adornData(ids, false)
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getDataList();
							}
						});
					} else {
						this.$message.error(data.msg);
					}
				});
			});
		}
	}
};
</script>
